<!DOCTYPE html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/keyframes-test.js"></script>
<script>
var keyframeA = {opacity: '0.5', left: '50px'};
var keyframeB = {opacity: '0', left: '0px'};
var keyframeC = {opacity: '0.75', left: '75px'};

var keyframeBExpectations = {
  0: {opacity: '0.5', left: '50px'},
  0.25: {opacity: '0.25', left: '25px'},
  0.5: {opacity: '0', left: '0px'}, // Corresponds to keyframeB (offset unspecified).
  0.75: {opacity: '0.375', left: '37.5px'},
  1: {opacity: '0.75', left: '75px'},
};

var offsetKeyframeA = {opacity: keyframeA.opacity, left: keyframeA.left, offset: 0};
var offsetKeyframeB = {opacity: keyframeB.opacity, left: keyframeB.left, offset: 0.25};
var offsetKeyframeC = {opacity: keyframeC.opacity, left: keyframeC.left, offset: 1};

var offsetKeyframeBExpectations = {
  0: {opacity: '0.5', left: '50px'},
  0.125: {opacity: '0.25', left: '25px'},
  0.25: {opacity: '0', left: '0px'}, // Corresponds to offsetKeyframeB (offset 0.25).
  0.5: {opacity: '0.25', left: '25px'},
  0.75: {opacity: '0.5', left: '50px'},
  1: {opacity: '0.75', left: '75px'},
};

test(function() {
  assertAnimationStyles([
    offsetKeyframeA,
    keyframeB,
    keyframeC,
  ], keyframeBExpectations, 'with first offset specified');
  assertAnimationStyles([
    keyframeA,
    offsetKeyframeB,
    keyframeC,
  ], offsetKeyframeBExpectations, 'with second offset specified');
  assertAnimationStyles([
    keyframeA,
    keyframeB,
    offsetKeyframeC,
  ], keyframeBExpectations, 'with third offset specified');
},
'element.animate() with 3 keyframes and 1 offset specified',
{
  help: 'http://dev.w3.org/fxtf/web-animations/#keyframe-animation-effects',
  assert: [
    'element.animate() should start an animation when three keyframes',
    'are provided with matching properties and one offset specified.',
    'The keyframes must maintain their ordering and get distributed',
    'correctly.',
  ],
  author: 'Alan Cutter',
});

test(function() {
  assertAnimationStyles([
    keyframeA,
    offsetKeyframeB,
    offsetKeyframeC,
  ], offsetKeyframeBExpectations, 'with first offset unspecified');
  assertAnimationStyles([
    offsetKeyframeA,
    keyframeB,
    offsetKeyframeC,
  ], keyframeBExpectations, 'with second offset unspecified');
  assertAnimationStyles([
    offsetKeyframeA,
    offsetKeyframeB,
    keyframeC,
  ], offsetKeyframeBExpectations, 'with third offset unspecified');
},
'element.animate() with 3 keyframes and 2 offsets specified',
{
  help: 'http://dev.w3.org/fxtf/web-animations/#keyframe-animation-effects',
  assert: [
    'element.animate() should start an animation when three keyframes',
    'are provided with matching properties and two offsets specified.',
    'The keyframes must maintain their ordering and get distributed',
    'correctly.',
  ],
  author: 'Alan Cutter',
});

test(function() {
  assertAnimationStyles([
    offsetKeyframeA,
    offsetKeyframeB,
    offsetKeyframeC,
  ], offsetKeyframeBExpectations, 'with ordered offsets');

  assert_throws('InvalidModificationError', function() {
    assertAnimationStyles([
      offsetKeyframeA,
      offsetKeyframeC,
      offsetKeyframeB,
    ], offsetKeyframeBExpectations, 'with unordered offsets (1)');
  });

  assert_throws('InvalidModificationError', function() {
    assertAnimationStyles([
      offsetKeyframeB,
      offsetKeyframeA,
      offsetKeyframeC,
    ], offsetKeyframeBExpectations, 'with unordered offsets (2)');
  });

  assert_throws('InvalidModificationError', function() {
    assertAnimationStyles([
      offsetKeyframeB,
      offsetKeyframeC,
      offsetKeyframeA,
    ], offsetKeyframeBExpectations, 'with unordered offsets (3)');
  });

  assert_throws('InvalidModificationError', function() {
    assertAnimationStyles([
      offsetKeyframeC,
      offsetKeyframeA,
      offsetKeyframeB,
    ], offsetKeyframeBExpectations, 'with unordered offsets (4)');
  });

  assert_throws('InvalidModificationError', function() {
    assertAnimationStyles([
      offsetKeyframeC,
      offsetKeyframeB,
      offsetKeyframeA,
    ], offsetKeyframeBExpectations, 'with unordered offsets (5)');
  });
},
'element.animate() with 3 keyframes and 3 offsets specified',
{
  help: 'http://dev.w3.org/fxtf/web-animations/#keyframe-animation-effects',
  assert: [
    'element.animate() should start an animation when three keyframes',
    'are provided with matching properties and all offsets specified.',
    'The keyframes must maintain their ordering and get distributed',
    'correctly.',
  ],
  author: 'Alan Cutter',
});
</script>
